<template>
    <div>
        <el-table
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%">
            <el-table-column
                    prop="number"
                    label="电影编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="电影名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="放映时间">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="放映时间">
            </el-table-column>

        </el-table>
        <el-button type="success" @click="car">购物车</el-button>
        <el-button type="success" @click="buy">购买</el-button>
        <el-button type="success" @click="order">订单详情</el-button>

        <el-dialog
                title="下单"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>单价： </span><span>{{price}}</span><br><br>
            <el-input style="width: 200px;" v-model="count" placeholder="请输入数量"></el-input>
            <el-button type="success" @click="inputCar">添加购物车</el-button>
        </el-dialog>

        <el-dialog
                title="订单详情"
                :visible.sync="dialogVisibleOrder"
                width="45%"
                :before-close="handleCloseOrder">
            <el-table
                    :data="orderData"
                    height="450"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="电影名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="订单编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="180">
                </el-table-column>

            </el-table>
        </el-dialog>

        <el-dialog
                title="购物车"
                :visible.sync="dialogCar"
                width="30%"
                :before-close="handle">

            <template>
                <el-table
                        :data="carData"
                        highlight-current-row
                        @current-change="carChange"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="电影名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="单价"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="count"
                            label="数量">
                    </el-table-column>
                </el-table>
            </template>
            <el-button type="success" @click="placeOrder">下单</el-button>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "MeiTuan",
        data() {
            return {
                id:"",
                tableData: "",
                count: "",
                number: "",
                name: "",
                price: 0,

                dialogVisible:false,

                dialogVisibleOrder:false,
                orderData:"",
                /*购物车*/
                username:"1",
                dialogCar:false,
                carData:"",
            }
        },
        mounted() {
            this.init();
            this.atoB();
        },
        methods: {
            car(){
                this.axios.get("mt/car/findAll/" + this.username).then(
                    r => this.carData = r.data
            );
                this.dialogCar = true;
            },
            handle(){
                this.dialogCar = false
            },


            carChange(){

            },




            handleCloseOrder(){
              this.dialogVisibleOrder = false;
            },
            order(){
                this.axios.get("mt/order/findAll").then(
                    r => {
                        this.orderData = r.data;
                    }
                );

                this.dialogVisibleOrder = true;
            },
            handleClose(){
              this.count = "";
                this.dialogVisible = false;
            },
            init() {
                this.axios.get("mt/movie/showAll").then(
                    r => {
                        this.tableData = r.data;
                    }
                )
            },
            buy(){
                this.dialogVisible = true;
            },

            inputCar(){
                let a = {
                    id: this.id,
                    number: this.number,
                    name: this.name,
                    price: this.price,
                    count:this.count
                };
                let formData = new FormData();
                formData.append("movieBeanJson",JSON.stringify(a));
                formData.append("username",this.username);
                console.log(3333)
                this.axios.put("mt/car/add",formData).then(
                    r => {
                        if (r.data == "ok"){
                            this.count = "";
                            this.dialogVisible = false
                            this.$message.success("添加成功")
                        }else if(r.data == "no"){
                            this.$message.error("添加失败")
                        }
                    }
                )
            },

            placeOrder() {
                let formData = new FormData();
                formData.append("username",this.username)
                this.axios.put("mt/movie/carBuy",formData).then(
                        r => {
                            console.log(r.data);
                            if (r.data == "ok"){
                                this.count = "";
                                this.dialogCar = false
                                this.$message.success("购买成功，出票中")
                            }
                        }
                )
            },
            handleCurrentChange(val) {
                this.id = val.id;
                this.number = val.number;
                this.name = val.name;
                this.price = val.price;
            }
        },
        computed: {
            // eslint-disable-next-line vue/return-in-computed-property
            atoB() {
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.username = this.$store.state.user.userBean.username;
            },
        },
    }
</script>

<style scoped>

</style>